import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
        child: Text("Flex 布局"),
      )),
      body: MyHomeContent(),
      floatingActionButton: FloatingActionButton(
        onPressed: () => print("FloatingActionButton"),
        child: Icon(Icons.star),
      ),
    );
  }
}

class MyHomeContent extends StatefulWidget {
  @override
  State<MyHomeContent> createState() => _MyHomeContentState();
}

class _MyHomeContentState extends State<MyHomeContent> {
  @override
  Widget build(BuildContext context) {
    var divider = Column(
      children: [
        Divider(height: 1, color: Colors.black),
        SizedBox.fromSize(size: Size.fromHeight(10))
      ],
    );
    return ListView(children: [
      /**
       * horizontal == Row
       * vertical == Column
       */
      Flex(direction: Axis.horizontal),
      Flex(direction: Axis.vertical),
      Column(
        children: [
          Text("主轴 默认 靠左"),
          Row(children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("主轴 center"),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("主轴 spaceAround"),
          Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("主轴 spaceBetween"),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("主轴 spaceEvenly around 的基础上平分空间"),
          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("副轴默认居中"),
          Row(children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("副轴 end"),
          Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("副轴 start"),
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Container(width: 80, height: 60, color: Colors.red),
            Container(width: 120, height: 100, color: Colors.green),
            Container(width: 90, height: 80, color: Colors.blue),
            Container(width: 50, height: 120, color: Colors.orange),
          ]),
          divider,
          Text("副轴 baseline 必须有文本"),
          Row(
              crossAxisAlignment: CrossAxisAlignment.baseline,
              mainAxisSize: MainAxisSize.max,
              textBaseline: TextBaseline.ideographic,
              children: [
                Container(
                    width: 80,
                    height: 60,
                    color: Colors.red,
                    child: Text("MMM", style: TextStyle(fontSize: 20))),
                Container(
                    width: 120,
                    height: 100,
                    color: Colors.green,
                    child: Text("MMM", style: TextStyle(fontSize: 10))),
                Container(
                    width: 90,
                    height: 80,
                    color: Colors.blue,
                    child: Text("MMM", style: TextStyle(fontSize: 30))),
                Container(
                    width: 50,
                    height: 120,
                    color: Colors.orange,
                    child: Text("MMM", style: TextStyle(fontSize: 14))),
              ]),
          divider,
          Text("副轴 stretch 向副轴方向拉伸到(容器)最大"),
          Container(
              height: 200,
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Container(width: 80, height: 60, color: Colors.red),
                    Container(width: 120, height: 100, color: Colors.green),
                    Container(width: 90, height: 80, color: Colors.blue),
                    Container(width: 50, height: 120, color: Colors.orange),
                  ])),
          divider,
          Text(
              "Flexible 默认 loose， 以红色和绿色下为 tight，他们会将剩余的空间占满，具体空间分配太麻烦了，到时候百度吧"),
          Text("Expanded == Flexible( fit: FlexFit.tight )"),
          Row(children: [
            Flexible(
                fit: FlexFit.tight,
                child: Container(
                  width: 80,
                  height: 60,
                  color: Colors.red,
                  child: Text("width: 80"),
                )),
            Expanded(
                child: Container(
              width: 120,
              height: 100,
              color: Colors.green,
              child: Text("width: 120"),
            )),
            Container(
              width: 90,
              height: 80,
              color: Colors.blue,
              child: Text("width: 90"),
            ),
            Container(
              width: 50,
              height: 120,
              color: Colors.orange,
              child: Text("width: 50"),
            ),
          ]),
          divider,
          Text("在总宽度超出屏幕宽度时，Expanded 还可以根据屏幕宽度进行收缩"),
          Row(children: [
            Expanded(
                child: Container(
              width: 300,
              height: 60,
              color: Colors.red,
              child: Text("width: 300"),
            )),
            Expanded(
                child: Container(
              width: 200,
              height: 100,
              color: Colors.green,
              child: Text("width: 200"),
            )),
            Container(
              width: 90,
              height: 80,
              color: Colors.blue,
              child: Text("width: 80"),
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.orange,
              child: Text("width: 50"),
            ),
          ]),
          divider,
        ],
      )
    ]);
  }
}
